<template>
  <div class="container">
    <el-form
      :inline="true"
      :model="taskform"
      ref="taskform"
      class="demo-form-inline"
    >
      <el-form-item label="工单编号">
        <el-input
          v-model="taskform.id"
          clearable
          placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-form-item label="工单状态">
        <el-select v-model="taskform.status" clearable placeholder="请选择">
          <el-option
            v-for="item in statuslist"
            :key="item.statusId"
            :label="item.statusName"
            :value="item.statusId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="onSubmit"
          >查询</el-button
        >
      </el-form-item>
    </el-form>
    <div class="app-container">
      <!-- 角色管理内容 -->
      <div class="role-operate">
        <el-button
          size="mini"
          icon="el-icon-circle-plus-outline"
          style="background-color: #ff8437; color: #fff"
          @click="newcreate"
          >新建</el-button
        >
        <!-- <el-button
          size="mini"
          style="background-color: #fbf4f0; color: #000"
          @click="dialogfn"
          >工单配置</el-button
        > -->
      </div>
      <el-table :data="list">
        <!-- 放置列 -->
        <el-table-column prop="index" align="center" label="序号" />
        <el-table-column prop="taskCode" align="center" label="工单编号" />
        <el-table-column prop="innerCode" align="center" label="设备编号" />
        <el-table-column
          prop="taskType.typeName"
          align="center"
          label="工单类型"
        />
        <el-table-column align="center" label="工单方式">
          <!-- 自定义列结构 -->
          <template v-slot="{ row }">
            <span>
              {{ row.createType === 1 ? "手动" : "自动" }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="taskStatusTypeEntity.statusName"
          align="center"
          label="工单状态"
        />
        <el-table-column prop="userName" align="center" label="运营人员" />
        <el-table-column prop="createTime" align="center" label="创建日期" />

        <el-table-column align="center" label="操作">
          <!-- 放置操作按钮 -->
          <template v-slot="{ row }">
            <el-button size="mini" type="text" @click="scandetails(row.taskId)"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 放置分页组件 -->
      <el-row
        type="flex"
        style="height: 60px"
        align="middle"
        justify="space-between"
      >
        <el-col :span="12"
          ><span style="font-size: 13px; color: #999; padding-left: 12px"
            >共{{ totalcount }}条记录 第{{ pageParams.pageIndex }}/{{
              totalpage
            }}页</span
          ></el-col
        >
        <el-col :push="12">
          <el-button-group>
            <el-button
              type="primary"
              @click="innPage"
              :disabled="this.pageParams.pageIndex == 1"
              icon="el-icon-arrow-left"
              style="
                background-color: #d5ddf8;
                color: #000;
                margin-right: 12px;
                border: none;
              "
              >上一页</el-button
            >
            <el-button
              type="primary"
              @click="addPage"
              :disabled="this.pageParams.pageIndex == this.totalpage"
              style="background-color: #d5ddf8; color: #000; border: none"
              >下一页<i class="el-icon-arrow-right el-icon--right"></i
            ></el-button>
          </el-button-group>
        </el-col>
      </el-row>
    </div>

    <!-- 工单配置的dialog -->
    <el-dialog
      title="工单配置"
      :visible="showDialog"
      @close="showDialog = false"
    >
      <el-form
        label-width="120px"
        ref="tasknumform"
        :model="tasknumform"
        :rules="rules"
      >
        <el-form-item prop="tasknum" label="补货警戒线:">
          <el-input-number
            size="mini"
            v-model="tasknumform.num"
            controls-position="right"
            style="width: 80%; display: flex; flex-direction: column"
          >
          </el-input-number>
        </el-form-item>
        <el-form-item>
          <!-- 按钮 -->
          <el-row type="flex" justify="center">
            <el-col :span="12">
              <el-button
                size="mini"
                @click="showDialog = false"
                style="background-color: #fbf4f0"
                >取消</el-button
              >
              <el-button
                size="mini"
                type="primary"
                @click="btnOK"
                style="background-color: #ff6c29"
                >确认</el-button
              >
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>

    
    <AddTask
      ref="Addtasks"
      :showAddDialog.sync="showAddDialog"
      @updateTaskList="getTaskList"
      :taskinfolist="taskinfolist"
    ></AddTask>
    <TaskDetails
      ref="Details"
      :scandetails="scandetails"
      :taskinfolist="taskinfolist"
      :showDetailsDialog.sync="showDetailsDialog"
      @changeAddDialog="changeAddDialog"
      @updatetablelist="getTaskList"
    ></TaskDetails>
  </div>
</template>
<script>
import AddTask from "./component/addtask.vue";
import TaskDetails from "./component/taskdetails.vue";
import {
  gettaskInfo,
  getTaskStatus,
  getTaskStyle,
  supplyAlertValue,
  changeSupplyAlertValue,
  getTaskList,
} from "@/api/businessTask";
export default {
  name: "Task",
  components: {
    AddTask,
    TaskDetails,
  },
  data() {
    return {
      showDialog: false,
      showAddDialog: false,
      showDetailsDialog: false,
      tasknumform: {
        num: "",
      },
      rules: {
        tasknum: [{ required: false }],
      },
      list: [],
      statuslist: [],
      taskinfolist: {},
      totalcount: "",
      totalpage: "",
      pageParams: {
        pageIndex: 1,
        pageSize: 10,
        isRepair: false,
      },
      taskform: {
        id: "",
        status: "",
      },
    };
  },
  async created() {
    this.getTaskList();
    this.getTaskStyle();
    this.statuslist = await getTaskStatus();
  },
  methods: {
    newcreate(){
      this.taskinfolist = {};
      this.$nextTick(()=>{
        this.$refs.Addtasks.getdetails()
      })
     this.showAddDialog = true
    },
    async getTaskStyle() {
      const res = await getTaskStyle();
      // console.log(res);
    },
    async getTaskList() {
      const res = await getTaskList(
        this.pageParams.pageIndex,
        this.pageParams.pageSize,
        this.taskform.id,
        this.taskform.status,
        this.pageParams.isRepair
      );
      this.list = res.currentPageRecords;
      this.totalcount = res.totalCount;
      this.totalpage = res.totalPage;
      this.list.forEach((item, index) => {
        this.$set(item, "index", this.pageParams.pageIndex * 10 - 9 + index);
      });
    },
    onSubmit() {
      this.getTaskList();
    },
    innPage() {
      this.pageParams.pageIndex--; // 赋值当前页码
      this.getTaskList();
    },
    addPage() {
      this.pageParams.pageIndex++; // 赋值当前页码
      this.getTaskList();
    },
    async dialogfn() {
      const res = await supplyAlertValue();
      this.tasknumform.num = res;
      this.showDialog = true;
    },
    async btnOK() {
      this.$refs.tasknumform.validate();
      await changeSupplyAlertValue({ alertValue: this.tasknumform.num });
      this.showDialog = false;
    },
    async gettaskInfo(taskId) {
      this.taskinfolist = await gettaskInfo(taskId);
      // console.log(this.taskinfolist);
      this.$nextTick(()=>{
        this.$refs.Details.getChannelList()
        this.$refs.Addtasks.getdetails()
      })
    },
    async scandetails(taskId) {
      // console.log(taskid);
      this.gettaskInfo(taskId);
      this.showDetailsDialog = true;
    },
    changeAddDialog() {
      this.showAddDialog = true;
    },
  },
};
</script>

<style scoped>
.role-operate {
  padding: 10px;
}
</style>
